<!doctype html>
<html lang="en">
    <head>
        <title>{{ title }}</title>
        <meta name="generator" content="{{ generator }}"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <!-- Chart CSS -->
        <link href="https://cdn.bootcss.com/Chart.js/2.8.0-rc.1/Chart.min.css" rel="stylesheet">
        <style type="text/css" media="screen">
            {{ stylesheet }}
        </style>

        <script src="https://cdn.bootcss.com/Chart.js/2.8.0-rc.1/Chart.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-4">
                    <div class='heading'>
                        <h2>{{ title }}</h2>
                        {% if description %}
                            <p class='description'>{{ description }}</p>
                        {% endif %}
                        <div>
                            <p class='attribute'><strong>测试时间：</strong> {{ report_summary.start_time }}</p>
                            <p class='attribute'><strong>测试时长：</strong> {{ report_summary.duration }}</p>
                            <p class='attribute'><strong>测试状态：</strong>
                                <span class="badge badge-success" style="background-color: rgb(92,184,92);padding: 4px 10px;">&nbsp;通过: {{ report_summary.status.pass }}&nbsp;</span>
                                <span class="badge badge-danger" style="background-color: rgb(217,83,79);padding: 4px 10px;">&nbsp;失败：{{ report_summary.status.fail }}&nbsp;</span>
                                <span class="badge badge-primary" style="background-color: rgb(240,173,78);padding: 4px 10px;">&nbsp;错误：{{ report_summary.status.error }}&nbsp;</span>
                                <span class="badge badge-secondary" style="background-color: rgb(206,212,218);padding: 4px 10px;">&nbsp;跳过：{{ report_summary.status.skip }}&nbsp;</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-4 middle-col">
                    <div class="total-area">
                        <h1>{{ report_detail.count }}</h1>
                        <div>用例总数</div>
                    </div>
                    <div class="total-area">
                        <h1>{{ report_summary.suite_count }}</h1>
                        <div>套件总数</div>
                    </div>
                </div>
                <div class="col-4">
                    <div style="width: 50%;">
                        <canvas id="chart-area" width="200" height="200"></canvas>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <hr/>
                   <p id="show_detail_line">
                        <a href="javascript:showCase(0)" style="font-weight: bold; color:#212529; font-size: 14px;">测试结果：</a>
                        <a href="javascript:showCase(4)" class="badge badge-success" style="background-color: rgb(92,184,92);padding: 4px 10px;">通过</a>
                        <a href="javascript:showCase(1)" class="badge badge-danger" style="background-color: rgb(217,83,79);padding: 4px 10px;">失败</a>
                        <a href="javascript:showCase(2)" class="badge badge-primary" style="background-color: rgb(240,173,78);padding: 4px 10px;">错误</a>
                        <a href="javascript:showCase(3)" class="badge badge-secondary" style="background-color: rgb(206,212,218);padding: 4px 10px;">跳过</a>
                        <!--<a href="javascript:showCase(5)" class="badge badge-info" style="background-color: rgb(91,192,222);padding: 4px 10px;">全部</a>-->
                   </p>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <table id='result_table' class="table">
                        <colgroup>
                            <col align='left' />
                            <col align='right' />
                            <col align='right' />
                            <col align='right' />
                            <col align='right' />
                            <col align='right' />
                            <col align='right' />
                        </colgroup>
                        <tr id='header_row'>
                            <td style="width: 33.333333%;">测试套件/用例</td>
                            <td>用例总数</td>
                            <td>通过</td>
                            <td>失败</td>
                            <td>错误</td>
                            <td>跳过</td>
                            <td>查看</td>
                        </tr>
                        {% for test in report_detail.tests %}
                        <tr class='{{ test.summary.status }}Class' type="suite" id="{{ test.summary.cid }}">
                            <td>{{ test.summary.desc }}</td>
                            <td>{{ test.summary.count }}</td>
                            <td>{{ test.summary.pass }}</td>
                            <td>{{ test.summary.fail }}</td>
                            <td>{{ test.summary.error }}</td>
                            <td>{{ test.summary.skip }}</td>
                            <td style="text-align: center;">
                                <a href="javascript:showAllClassDetail('look',{{ test.summary.count }})" id='look'>查看详情</a>
                            </td>
                        </tr>
                            {% for detail in test.detail %}
                                {% if detail.has_output %}
                                    <tr id="{{ detail.tid }}" cid="{{ test.summary.cid }}" class='{% if detail.status_code==0 %}hiddenRow{% endif %}' type="case">
                                        <td class='{{ detail.status }}Case'><div class='testcase'>{{ detail.desc }}</div></td>
                                        <td colspan='6' align='center'>
                                        <!--css div popup start-->
                                        <a class="popup_link {{ detail.status }}Case" onfocus='this.blur();' href="javascript:showTestDetail('div_{{ detail.tid }}')" >
                                            {{ detail.status | upper }}</a>
                                        <div id='div_{{ detail.tid }}' class="popup_window">
                                            <div style='text-align: right; color:red;cursor:pointer'>
                                                <a onfocus='this.blur();' onclick="document.getElementById('div_{{ detail.tid }}').style.display = 'none';" >
                                                   <button type="button" class="close" aria-label="Close">
                                                        <span aria-hidden="true">×&nbsp;&nbsp;</span>
                                                   </button>
                                                </a>
                                            </div>
                                            <pre style="font-size: 10px;">{{ detail.tid }}:{{ detail.output }}</pre>
                                        </div>
                                        <!--css div popup end-->
                                        </td>
                                    </tr>
                                {% else %}
                                    <tr id="{{ detail.tid }}" cid="{{ test.summary.cid }}" class='{% if detail.status_code==0 %}hiddenRow{% endif %}' type="case">
                                        <td class='{{ detail.status }}Case'><div class='testcase'>{{ detail.desc }}</div></td>
                                        <td class='{{ detail.status }}Case' colspan='6' align='center'>{{ detail.status | upper }}</td>
                                    </tr>
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                        <tr id='total_row'>
                            <td>总计</td>
                            <td>{{ report_detail.count }}</td>
                            <td>{{ report_detail.pass }}</td>
                            <td>{{ report_detail.fail }}</td>
                            <td>{{ report_detail.error }}</td>
                            <td>{{ report_detail.skip }}</td>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <div class="container" style="position: fixed;right: 5px;bottom: 10px;cursor: pointer;">
                        <div class="float-right"><a class="gotop d-none d-sm-block" href="javascript:scroll(0,0)">
                            <svg class="bi bi-capslock" width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M7.27 1.047a1 1 0 0 1 1.46 0l6.345 6.77c.6.638.146 1.683-.73 1.683H11.5v1a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-1H1.654C.78 9.5.326 8.455.924 7.816L7.27 1.047zM14.346 8.5L8 1.731 1.654 8.5H4.5a1 1 0 0 1 1 1v1h5v-1a1 1 0 0 1 1-1h2.846zm-9.846 5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-1zm6 0h-5v1h5v-1z"></path>
                            </svg></a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Optional JavaScript -->
            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
            <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
            <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
            <script language="javascript" type="text/javascript">
                {{ javascript }}
                (function() {
                    window.chartColors = {
                        red: 'rgb(217,83,79)',
                        orange: 'rgb(255, 159, 64)',
                        yellow: 'rgb(255, 205, 86)',
                        green: 'rgb(92,184,92)',
                        blue: 'rgb(240,173,78)',
                        purple: 'rgb(153, 102, 255)',
                        grey: 'rgb(206,212,218)'
                    };
                    var config = {
                        type: 'doughnut',
                        data: {
                            datasets: [{
                                data: [
                                    {{ report_summary.status.pass }},
                                    {{ report_summary.status.fail }},
                                    {{ report_summary.status.error }},
                                    {{ report_summary.status.skip }},
                                ],
                                backgroundColor: [
                                    window.chartColors.green,
                                    window.chartColors.red,
                                    window.chartColors.blue,
                                    window.chartColors.grey
                                ],
                                hoverBackgroundColor: [
                                    window.chartColors.green,
                                    window.chartColors.red,
                                    window.chartColors.blue,
                                    window.chartColors.grey
                                ],
                                label: 'Dataset 1'
                            }],
                            labels: [
                                '通过',
                                '失败',
                                '错误',
                                '跳过',
                            ]
                        },
                        options: {
                            responsive: true,
                            legend: {
                                position: 'top',
                            },
                            title: {
                                display: true,
                                text: '测试结果占比'
                            },
                            animation: {
                                animateScale: true,
                                animateRotate: true
                            }
                        }
                    };
                    window.onload = function() {
                        var ctx = document.getElementById('chart-area').getContext('2d');
                        window.myDoughnut = new Chart(ctx, config);
                    };
                })();
            </script>
        </div>
    </body>
</html>